<template>
    <div class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline search-box">
                <label class="layui-form-label">排期时间</label>
                <div class="layui-input-inline"><input ref="startPlanDate" id="startPlanDate" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" type="text" :value="startPlanDate"></div>
                <div class="layui-input-inline" style="width: auto; line-height:38px;"> - </div>
                <div class="layui-input-inline"><input ref="endPlanDate" id="endPlanDate" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" type="text" :value="endPlanDate"></div>

                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline"><select ref="status"><option value="0">新分配</option><option value="1">商家审核</option><option value="2">审核中</option><option value="3">审核通过</option><option value="4">审核失败</option></select></div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline"><select ref="channelId"><option value="0">请选择渠道</option></select></div>
                <div class="layui-input-inline" style="width: auto; line-height:38px;"> &nbsp; </div>
                <div class="layui-input-inline"><select ref="siteId"><option value="0">请选择站点</option></select></div>
                <div class="layui-inline"><button class="layui-btn" @click="searchList">搜索</button><button class="layui-btn">查看已排期详情</button></div>
            </div>
        </div>
        <table class="layui-table schedule-table-data">
            <thead>
                <tr><th>日期</th><th>站点</th><th>渠道</th><th>剩余总量</th><th></th><th>已排期数</th><th>剩余产量</th></tr> 
            </thead>
            <tbody>
                <tr v-for="item in planTableList" :data-site-id="item.siteId" :data-channel-id="item.channelId" >
                    <td>{{item.planDate}}</td>
                    <td>{{item.siteName}}</td>
                    <td>{{item.channelName}}</td>
                    <td>{{item.leftTotal}} / {{item.channelDayTotal}}</td>
                    <td><button class="layui-btn layui-btn-small">排期</button></td>
                    <td class="layui-text">{{item.hasPlaned}} <router-link :to="'details_list'">查看</router-link></td>
                    <td>{{item.leftProductCount}}篇</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
    export default{
        name: 'scheduleTable',
        data: function () {
            return {
                startPlanDate: '',
                endPlanDate: '',
                status: '',
                channelId: '',
                siteId: '',
                planTableList: []
            }
        },
        methods: {
            searchList: function(){
                console.info(3323232323)
                var me = this;
                var startPlanDateValue = me.$refs.startPlanDate.value,
                    endPlanDateValue = me.$refs.endPlanDate.value;
                // me.$router.push({path: '/plan/schedule_table',params: {
                //     startPlanDateValue : startPlanDateValue,
                //     endPlanDateValue : endPlanDateValue
                // } });
                axios.get('/plan/tableList',{
                    params: {
                        startPlanDateValue : startPlanDateValue,
                        endPlanDateValue : endPlanDateValue
                    }
                }).then(function(res){
                    
                    console.log(me.$route.params)
                    me.startPlanDate = startPlanDateValue;
                    me.endPlanDate = endPlanDateValue;
                    me.planTableList = [
                        {
                            "planDate": "2017-10-10",//#排期日期
                            "siteId": 2,//#站点ID
                            "siteName": "简优Life",//#站点名称
                            "siteTotalProduct": 21,//#站点每日总产能
                            "channelId": 5,//#渠道ID
                            "channelName": "达人平台a",//#渠道名称
                            "channelDayTotal": 9,//#渠道每日总量
                            "leftTotal": 8,//#剩余总量
                            "hasPlaned": 1,//#已排期数量
                            "leftProductCount": -42.2//#剩余产能
                        },
                        {
                            "planDate": "2017-10-11",
                            "siteId": 2,
                            "siteName": "简优Life",
                            "siteTotalProduct": 21,
                            "channelId": 4,
                            "channelName": "有好货",
                            "channelDayTotal": 30,
                            "leftTotal": 28,
                            "hasPlaned": 2,
                            "leftProductCount": -42.2
                        },
                        {
                            "planDate": "2017-10-11",
                            "siteId": 2,
                            "siteName": "简优Life",
                            "siteTotalProduct": 21,
                            "channelId": 5,
                            "channelName": "达人平台a",
                            "channelDayTotal": 9,
                            "leftTotal": 8,
                            "hasPlaned": 1,
                            "leftProductCount": -42.2
                        },
                        {
                            "planDate": "2017-10-11",
                            "siteId": 4,
                            "siteName": "站点2",
                            "siteTotalProduct": 11,
                            "channelId": 5,
                            "channelName": "达人平台a",
                            "channelDayTotal": 9,
                            "leftTotal": 7,
                            "hasPlaned": 2,
                            "leftProductCount": -22.200000000000003
                        },
                        {
                            "planDate": "2017-10-12",
                            "siteId": 4,
                            "siteName": "站点2",
                            "siteTotalProduct": 11,
                            "channelId": 4,
                            "channelName": "有好货",
                            "channelDayTotal": 30,
                            "leftTotal": 29,
                            "hasPlaned": 1,
                            "leftProductCount": -22.200000000000003
                        }
                    ];
                }).catch(function(err){
                    console.log(err);
                });
            }
        },
        mounted: function(){
            var me = this;
            layui.use(['form', 'layer', 'laydate'], function(){
                me.layui_form = layui.form;
                me.layui_layer = layui.layer;
                me.layui_laydate = layui.laydate;
                me.layui_form.render();
                
                me.layui_laydate.render({
                    elem: '#startPlanDate'
                });
                me.layui_laydate.render({
                    elem: '#endPlanDate'
                });
            });
            
            me.searchList();
        }
    }
</script>
<style>
</style>
